{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

{{page-title "Create a custom template"}}
<section class="section">
    <header class="run-job-header">
        <h1 class="title is-3">Create template</h1>
        <p>Provide a job spec that you or others can re-use later. Anytime it is applied to a new job, you will have the opportunity to modify it before that job is run.</p>
    </header>
    <form class="new-job-template" autocomplete="off">
        <div class={{if this.system.shouldShowNamespaces "input-dropdown-row"}}>
            <label>
                <span>
                    Template name
                </span>
                <Input
                    @type="text"
                    @value={{mut this.templateName}}
                    placeholder="your-template-name-here"
                    class="input path-input {{if this.isDuplicateTemplate "error"}}"
                    {{autofocus}}
                    data-test-template-name
                />
                {{#if this.isDuplicateTemplate}}
                    <p class="help is-danger" data-test-duplicate-error>
                        There is already a templated named {{this.templateName}}.
                    </p>
                {{/if}}
                {{#if this.hasInvalidName}}
                  <p class="help is-danger" data-test-invalid-name-error>
                    Template name must contain only alphanumeric or "-", "_", "~", or "/" characters, and be fewer than 128 characters in length.
                  </p>
                {{/if}}
            </label>
            {{#if this.system.shouldShowNamespaces}}
                <label>
                    <span>
                        Namespace
                    </span>
                    <SingleSelectDropdown
                        data-test-namespace-facet
                        @label="Namespace"
                        @options={{this.namespaceOptions}}
                        @selection={{this.templateNamespace}}
                        @onSelect={{fn (mut this.templateNamespace)}}
                    />
                </label>
            {{/if}}
        </div>
        <VariableForm::JobTemplateEditor
            @keyValues={{this.model.keyValues}}
            @updateKeyValue={{this.updateKeyValue}}
        />
        <footer class="button-group">
            <Hds::Button @text="Save" disabled={{is-empty this.templateName}} {{on "click" this.save}} data-test-save-template />
            <Hds::Button @text="Cancel" @route="jobs.run" @color="secondary" data-test-cancel-template />
        </footer>
    </form>
</section>
